:root {
    /* Primary color palette */
    --primary-color: #4a91e2;
    --primary-light: #6ba5e9;
    --primary-dark: #3a7bc8;
  
    /* Secondary color palette */
    --secondary-color: #67b26f;
    --secondary-light: #7fc287;
    --secondary-dark: #539a5b;
  
    /* Neutral colors */
    --background: #f8f9fa;
    --surface: #ffffff;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
  
    /* Status colors */
    --error-color: #dc3545;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
  
    /* Glass effect */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
  
    /* Spacing system */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
  
    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
  
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
  
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
  }
  
  /* Base styles */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 16px;
    scroll-behavior: smooth;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    line-height: 1.6 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    background-attachment: fixed !important;
    color: var(--text-primary) !important;
    min-height: 100vh !important;
    padding: 20px !important;
  }
  
  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #fff !important;
  }
  
  h1 {
    font-size: 2.25rem !important;
  }
  h2 {
    font-size: 1.875rem !important;
  }
  h3 {
    font-size: 1.5rem !important;
  }
  h4 {
    font-size: 1.25rem !important;
  }
  h5 {
    font-size: 1.125rem !important;
  }
  h6 {
    font-size: 1rem !important;
  }
  
  p {
    margin-bottom: 1rem !important;
  }
  
  a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
  }
  
  a:hover {
    color: var(--primary-dark) !important;
  }
  
  /* Layout */
  .container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 15px !important;
    box-shadow: var(--glass-shadow) !important;
    border: 1px solid var(--glass-border) !important;
  }
  
  .row {
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--space-md));
  }
  
  .col {
    flex: 1 0 0%;
    padding: var(--space-md);
  }
  
  /* Grid system */
  .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
  }
  
  /* Cards */
  .card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    text-align: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    height: 100% !important;
  }
  
  .card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  }
  
  .card i {
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }
  
  .card h3 {
    margin-bottom: 10px !important;
    color: #fff !important;
  }
  
  .card p {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 0 !important;
  }
  
  /* Forms */
  form {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
  }
  
  .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-bottom: 15px !important;
  }
  
  label {
    color: #fff !important;
    font-weight: 500 !important;
    margin-bottom: 5px !important;
  }
  
  input,
  select,
  textarea {
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    width: 100% !important;
  }
  
  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(74, 145, 226, 0.25);
  }
  
  input::placeholder,
  select::placeholder,
  textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  
  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 16px;
    padding-right: var(--space-xl);
  }
  
  /* Buttons */
  .btn,
  button {
    padding: 12px 24px !important;
    background: var(--secondary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    text-decoration: none !important;
    text-align: center !important;
    font-weight: 500 !important;
    display: inline-block !important;
  }
  
  .btn:hover,
  button:hover {
    background: var(--secondary-dark) !important;
    transform: translateY(-2px) !important;
  }
  
  .btn:active,
  button:active {
    transform: translateY(0) !important;
  }
  
  .btn i,
  button i {
    margin-right: var(--space-sm);
  }
  
  .btn-primary {
    background: var(--primary-color);
  }
  
  .btn-primary:hover {
    background: var(--primary-dark);
  }
  
  .btn-danger {
    background: var(--error-color);
  }
  
  .btn-danger:hover {
    background: #c82333;
  }
  
  .btn-success {
    background: var(--success-color);
  }
  
  .btn-success:hover {
    background: #218838;
  }
  
  .btn-sm {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
  }
  
  .btn-lg {
    padding: var(--space-lg) var(--space-xl);
    font-size: 1.125rem;
  }
  
  .btn-block {
    display: block;
    width: 100%;
  }
  
  /* Tables */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 20px !important;
  }
  
  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--space-lg);
  }
  
  .recordings-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    margin-top: 20px !important;
  }
  
  .recordings-table th {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
  }
  
  .recordings-table td {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    padding: 12px !important;
    transition: background var(--transition-fast);
  }
  
  .recordings-table tr:hover td {
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  .recordings-table tr:first-child td:first-child {
    border-top-left-radius: var(--radius-sm);
  }
  
  .recordings-table tr:first-child td:last-child {
    border-top-right-radius: var(--radius-sm);
  }
  
  .recordings-table tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-sm);
  }
  
  .recordings-table tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-sm);
  }
  
  /* Audio elements */
  .audio-cell {
    padding: var(--space-lg) !important;
  }
  
  audio {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
  }
  
  audio::-webkit-media-controls-panel {
    background: rgba(255, 255, 255, 0.1);
  }
  
  audio::-webkit-media-controls-play-button,
  audio::-webkit-media-controls-mute-button {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
  }
  
  .audio-info {
    display: block;
    margin-top: var(--space-sm);
    text-align: center;
  }
  
  .download-link {
    color: var(--primary-light);
    text-decoration: none;
    font-size: 0.9em;
    transition: color var(--transition-fast);
  }
  
  .download-link:hover {
    color: #fff;
    text-decoration: underline;
  }
  
  /* Filters */
  .filters {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(10px);
  }
  
  .filter-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }
  
  .date-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }
  
  .filter-buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
  
  .filter-btn {
    padding: var(--space-md) var(--space-lg);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    flex: 1;
    text-align: center;
    text-decoration: none;
    min-width: 120px;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }
  
  .filter-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
  }
  
  /* Pagination */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }
  
  .page-link {
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }
  
  .page-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }
  
  .page-link.active {
    background: var(--primary-color);
    color: white;
  }
  
  /* Alerts */
  .alert {
    padding: 15px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    color: #fff !important;
    text-align: center !important;
    position: relative;
    animation: fadeIn var(--transition-normal);
  }
  
  .alert-success {
    background: var(--success-color) !important;
  }
  
  .alert-error {
    background: var(--error-color) !important;
  }
  
  .alert-warning {
    background: var(--warning-color);
    color: #212529;
  }
  
  .alert-info {
    background: var(--info-color);
  }
  
  /* Modals */
  .modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    animation: fadeIn var(--transition-normal);
  }
  
  .modal.show {
    display: flex;
  }
  
  .modal-content {
    width: 90%;
    max-width: 500px;
    background: linear-gradient(135deg, rgba(74, 145, 226, 0.9), rgba(103, 178, 111, 0.9));
    backdrop-filter: blur(10px);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideIn var(--transition-normal);
    position: relative;
    color: #fff;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
  }
  
  .modal-title {
    margin: 0;
    font-size: 1.5rem;
  }
  
  .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #fff;
    padding: var(--space-xs);
  }
  
  .modal-body {
    margin-bottom: var(--space-lg);
  }
  
  .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
  }
  
  /* Recording Interface */
  .recording-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }
  
  #recordingIndicator {
    background: var(--error-color);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
    animation: pulse 1.5s infinite;
  }
  
  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes slideIn {
    from {
      transform: translateY(-20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes pulse {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  
  /* Utility Classes */
  .text-center {
    text-align: center !important;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  
  .text-white {
    color: #fff !important;
  }
  .text-primary {
    color: var(--primary-color);
  }
  .text-secondary {
    color: var(--secondary-color);
  }
  .text-success {
    color: var(--success-color);
  }
  .text-danger {
    color: var(--error-color);
  }
  
  .bg-primary {
    background-color: var(--primary-color);
  }
  .bg-secondary {
    background-color: var(--secondary-color);
  }
  .bg-success {
    background-color: var(--success-color);
  }
  .bg-danger {
    background-color: var(--error-color);
  }
  .bg-warning {
    background-color: var(--warning-color);
  }
  .bg-info {
    background-color: var(--info-color);
  }
  
  .d-flex {
    display: flex;
  }
  .flex-column {
    flex-direction: column;
  }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-between {
    justify-content: space-between;
  }
  .align-items-center {
    align-items: center;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .w-100 {
    width: 100% !important;
  }
  .h-100 {
    height: 100%;
  }
  
  .m-0 {
    margin: 0;
  }
  .mt-0 {
    margin-top: 0;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .ml-0 {
    margin-left: 0;
  }
  .mr-0 {
    margin-right: 0;
  }
  
  .m-1 {
    margin: var(--space-xs);
  }
  .mt-1 {
    margin-top: var(--space-xs);
  }
  .mb-1 {
    margin-bottom: var(--space-xs);
  }
  .ml-1 {
    margin-left: var(--space-xs);
  }
  .mr-1 {
    margin-right: var(--space-xs);
  }
  
  .m-2 {
    margin: var(--space-sm);
  }
  .mt-2 {
    margin-top: var(--space-sm);
  }
  .mb-2 {
    margin-bottom: var(--space-sm);
  }
  .ml-2 {
    margin-left: var(--space-sm);
  }
  .mr-2 {
    margin-right: var(--space-sm);
  }
  
  .m-3 {
    margin: var(--space-md);
  }
  .mt-3 {
    margin-top: 15px !important;
  }
  .mb-3 {
    margin-bottom: var(--space-md);
  }
  .ml-3 {
    margin-left: var(--space-md);
  }
  .mr-3 {
    margin-right: var(--space-md);
  }
  
  .m-4 {
    margin: var(--space-lg);
  }
  .mt-4 {
    margin-top: 20px !important;
  }
  .mb-4 {
    margin-bottom: 20px !important;
  }
  .ml-4 {
    margin-left: var(--space-lg);
  }
  .mr-4 {
    margin-right: var(--space-lg);
  }
  
  .m-5 {
    margin: var(--space-xl);
  }
  .mt-5 {
    margin-top: var(--space-xl);
  }
  .mb-5 {
    margin-bottom: var(--space-xl);
  }
  .ml-5 {
    margin-left: var(--space-xl);
  }
  .mr-5 {
    margin-right: var(--space-xl);
  }
  
  .p-0 {
    padding: 0;
  }
  .pt-0 {
    padding-top: 0;
  }
  .pb-0 {
    padding-bottom: 0;
  }
  .pl-0 {
    padding-left: 0;
  }
  .pr-0 {
    padding-right: 0;
  }
  
  .p-1 {
    padding: var(--space-xs);
  }
  .pt-1 {
    padding-top: var(--space-xs);
  }
  .pb-1 {
    padding-bottom: var(--space-xs);
  }
  .pl-1 {
    padding-left: var(--space-xs);
  }
  .pr-1 {
    padding-right: var(--space-xs);
  }
  
  .p-2 {
    padding: var(--space-sm);
  }
  .pt-2 {
    padding-top: var(--space-sm);
  }
  .pb-2 {
    padding-bottom: var(--space-sm);
  }
  .pl-2 {
    padding-left: var(--space-sm);
  }
  .pr-2 {
    padding-right: var(--space-sm);
  }
  
  .p-3 {
    padding: var(--space-md);
  }
  .pt-3 {
    padding-top: var(--space-md);
  }
  .pb-3 {
    padding-bottom: var(--space-md);
  }
  .pl-3 {
    padding-left: var(--space-md);
  }
  .pr-3 {
    padding-right: var(--space-md);
  }
  
  .p-4 {
    padding: var(--space-lg);
  }
  .pt-4 {
    padding-top: var(--space-lg);
  }
  .pb-4 {
    padding-bottom: var(--space-lg);
  }
  .pl-4 {
    padding-left: var(--space-lg);
  }
  .pr-4 {
    padding-right: var(--space-lg);
  }
  
  .p-5 {
    padding: var(--space-xl);
  }
  .pt-5 {
    padding-top: var(--space-xl);
  }
  .pb-5 {
    padding-bottom: var(--space-xl);
  }
  .pl-5 {
    padding-left: var(--space-xl);
  }
  .pr-5 {
    padding-right: var(--space-xl);
  }
  
  .rounded {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-circle {
    border-radius: 50%;
  }
  
  .shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075);
  }
  .shadow {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
  }
  .shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  }
  
  /* Responsive Design */
  @media (max-width: 992px) {
    html {
      font-size: 15px;
    }
  
    .container {
      padding: var(--space-md);
    }
  
    .dashboard-grid {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
  }
  
  @media (max-width: 768px) {
    html {
      font-size: 14px;
    }
  
    body {
      padding: var(--space-sm);
    }
  
    .container {
      padding: 15px !important;
    }
  
    .dashboard-grid {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    }
  
    .filter-group,
    .date-filters {
      grid-template-columns: 1fr;
    }
  
    .filter-buttons {
      flex-direction: column;
    }
  
    .filter-btn {
      width: 100%;
    }
  
    h1 {
      font-size: 1.75rem;
    }
    h2 {
      font-size: 1.5rem;
    }
    h3 {
      font-size: 1.25rem;
    }
  }
  
  @media (max-width: 576px) {
    .dashboard-grid {
      grid-template-columns: 1fr !important;
    }
  
    .container {
      padding: 15px !important;
    }
  
    .recordings-table {
      display: block !important;
      overflow-x: auto !important;
    }
  
    .recordings-table thead {
      display: none; /* Hide headers on mobile */
    }
  
    .recordings-table tr {
      display: block;
      margin-bottom: var(--space-md);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      padding: var(--space-sm);
    }
  
    .recordings-table td {
      display: block;
      text-align: left;
      padding: var(--space-sm);
      border: none;
      position: relative;
      padding-left: 120px;
      min-height: 40px;
      background: transparent;
    }
  
    .recordings-table td:before {
      content: attr(data-label);
      position: absolute;
      left: var(--space-sm);
      width: 100px;
      font-weight: bold;
    }
  
    .audio-cell {
      padding-left: var(--space-sm) !important;
    }
  
    .btn,
    button {
      width: 100% !important;
    }
  
    .modal-content {
      width: 95%;
      padding: var(--space-md);
    }
  }
  
  /* Print styles */
  @media print {
    body {
      background: white;
      color: black;
    }
  
    .container {
      background: white;
      box-shadow: none;
      border: none;
      padding: 0;
      max-width: 100%;
    }
  
    .no-print {
      display: none !important;
    }
  
    a {
      text-decoration: underline;
      color: #000;
    }
  
    .card,
    .filters,
    .recordings-table th,
    .recordings-table td {
      background: white !important;
      color: black !important;
      border: 1px solid #ddd;
    }
  
    .recordings-table {
      border-collapse: collapse;
    }
  }
  
  /* QR Code Styles */
  .qr-code-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }
  
  .qr-code-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border: 1px solid var(--glass-border);
    overflow: hidden;
  }
  
  .qr-code-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  
  .qr-code-image {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-sm);
    background: white;
    padding: var(--space-sm);
  }
  
  .qr-code-info {
    margin-top: var(--space-sm);
    font-size: 0.9rem;
  }
  
  .qr-code-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  
  /* Login and Registration */
  .auth-container {
    max-width: 400px !important;
    margin: 10vh auto !important;
  }
  
  .auth-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 15px !important;
    padding: 30px !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
  }
  
  .auth-logo {
    text-align: center !important;
    margin-bottom: 30px !important;
  }
  
  .auth-title {
    text-align: center !important;
    margin-bottom: 30px !important;
    color: #fff !important;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .dashboard-grid {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    }
  }
  
  @media (max-width: 576px) {
    .dashboard-grid {
      grid-template-columns: 1fr !important;
    }
  
    .container {
      padding: 15px !important;
    }
  
    .recordings-table {
      display: block !important;
      overflow-x: auto !important;
    }
  
    .btn,
    button {
      width: 100% !important;
    }
  }