.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-family:var(--font-primary);font-size:1rem;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;position:relative;-webkit-tap-highlight-color:transparent;user-select:none}@media (hover:hover){.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgb(0 0 0 / 15%)}}.btn:active{transform:translateY(0) scale(0.98);box-shadow:0 2px 4px rgb(0 0 0 / 10%);opacity:0.9}.btn:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none !important;box-shadow:none !important}.btn-primary{background-color:var(--btn-primary-bg,#4a6fa5);color:var(--btn-primary-text,white)}@media (hover:hover){.btn-primary:hover{background-color:var(--btn-primary-hover,#3a5a8a)}}.btn-secondary{background-color:var(--btn-secondary-bg,transparent);color:var(--btn-secondary-text,var(--text-primary));border:1px solid var(--card-border)}@media (hover:hover){.btn-secondary:hover{background-color:var(--btn-secondary-hover,rgb(0 0 0 / 5%));border-color:var(--text-primary)}}.btn-success{background-color:#4caf50;color:white}@media (hover:hover){.btn-success:hover{background-color:#45a049}}.btn-danger{background-color:#f44336;color:white}@media (hover:hover){.btn-danger:hover{background-color:#d32f2f}}.btn-dark{background-color:#222;color:white}@media (hover:hover){.btn-dark:hover{background-color:#444}}.button,.cta-button,.action-button,.jai-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-family:var(--font-primary);font-size:1rem;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;position:relative;-webkit-tap-highlight-color:transparent;user-select:none}@media (hover:hover){.button:hover,.cta-button:hover,.action-button:hover,.jai-link:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgb(0 0 0 / 15%)}}.cta-button,.action-button{background-color:var(--btn-primary-bg,#4a6fa5);color:var(--btn-primary-text,white)}@media (hover:hover){.cta-button:hover,.action-button:hover{background-color:var(--btn-primary-hover,#3a5a8a)}}.jai-link{background-color:#222;color:white;margin-top:auto}@media (hover:hover){.jai-link:hover{background-color:#444}}.btn-sm{padding:8px 16px;font-size:0.875rem;border-radius:6px}.btn-lg{padding:16px 32px;font-size:1.125rem;border-radius:10px}.btn-block{width:100%}.btn-icon{padding:12px;min-width:44px}.btn-round{border-radius:50px}.btn-outline{background-color:transparent;box-shadow:inset 0 0 0 1px currentcolor}.btn-outline:hover{background-color:currentcolor;color:white}.btn-loading{color:transparent;pointer-events:none}.btn-loading::after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid currentcolor;border-radius:50%;border-top-color:transparent;animation:button-loading-spinner 1s linear infinite}@keyframes button-loading-spinner{from{transform:rotate(0turn)}to{transform:rotate(1turn)}}.back-button-container{text-align:center;margin-top:40px;margin-bottom:40px}.card,.jai-card,.project-card,.app-card{background-color:var(--card-bg);border-radius:var(--border-radius-lg);box-shadow:0 2px 8px var(--card-shadow);transition:all var(--transition-normal);overflow:hidden;position:relative}.jai-card{display:grid;grid-template-rows:var(--jai-image-height,160px) 1fr;min-height:var(--jai-card-height,360px);height:100%;border:1px solid rgb(0 0 0 / 10%);cursor:pointer;overflow:hidden;position:relative}.card:hover,.jai-card:hover,.project-card:hover,.app-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px var(--card-shadow)}.jai-card-link{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.jai-image{height:var(--jai-image-height,160px);overflow:hidden;width:100%;contain:layout style paint}.jai-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;will-change:transform;transform:translateZ(0)}.jai-card:hover .jai-image img{transform:scale(1.05)}.jai-content{padding:20px 20px 15px;display:flex;flex-direction:column}.card-title,.jai-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-primary)}.card-description,.jai-description{font-size:var(--font-size-md);color:var(--text-secondary);line-height:1.6;flex:1 1 auto}.jai-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.form-group{margin-bottom:var(--spacing-lg)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.form-input,.form-select,.form-textarea,.search-input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-primary);font-size:var(--font-size-md);color:var(--text-primary);background-color:var(--bg-secondary);border:1px solid var(--card-border);border-radius:var(--border-radius-md);transition:all var(--transition-fast)}.form-input:focus,.form-select:focus,.form-textarea:focus,.search-input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgb(6 106 201 / 10%)}.toggle-switch{position:relative;display:inline-block;width:48px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:0.4s;border-radius:24px}.toggle-slider::before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:white;transition:0.4s;border-radius:50%}input:checked+.toggle-slider{background-color:var(--accent-color)}input:checked+.toggle-slider::before{transform:translateX(24px)}.modal-overlay{position:fixed;inset:0;background-color:rgb(0 0 0 / 50%);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{background-color:var(--bg-secondary);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);max-width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 24px rgb(0 0 0 / 20%);transform:scale(0.9);transition:transform 0.3s ease}.modal-overlay.active .modal-content{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.modal-title{font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary)}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color 0.2s ease}.modal-close:hover{background-color:rgb(0 0 0 / 10%)}.grid{display:grid;gap:var(--spacing-lg)}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}/**
 * Component Grid Layouts with Container Queries
 */
.jai-container,
.projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  gap: 30px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 1rem;
  align-items: stretch;
  container-type: inline-size;
}

/* Container queries for responsive grid layouts */
@container (min-width: 640px) {
  .jai-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .jai-description {
    margin-bottom: 15px;
  }
}

@container (min-width: 769px) and (max-width: 1024px) {
  .jai-container,
  .projects-container {
    grid-template-columns: repeat(2, minmax(280px, 400px));
    justify-content: center;
  }
  
  .jai-card {
    max-width: 400px;
  }
  
  .jai-description {
    margin-bottom: 20px;
  }
}.page-content{margin-bottom:40px;text-align:center}.page-title{font-size:32px;font-weight:600;margin-bottom:10px;color:var(--text-primary)}.page-description{font-size:16px;color:var(--text-secondary);max-width:600px;margin:0 auto;text-align:center}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.pt-sm{padding-top:var(--spacing-sm)}.pt-md{padding-top:var(--spacing-md)}.pt-lg{padding-top:var(--spacing-lg)}.pt-xl{padding-top:var(--spacing-xl)}.pb-sm{padding-bottom:var(--spacing-sm)}.pb-md{padding-bottom:var(--spacing-md)}.pb-lg{padding-bottom:var(--spacing-lg)}.pb-xl{padding-bottom:var(--spacing-xl)}.hidden{display:none !important}.visible{display:block !important}.flex{display:flex}.inline-flex{display:inline-flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-column{display:flex;flex-direction:column}.loading{position:relative;opacity:0.6;pointer-events:none}.loading::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--accent-color);border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgb(0 0 0 / 10%);border-top-color:var(--accent-color);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.badge{display:inline-flex;align-items:center;padding:4px 12px;font-size:12px;font-weight:500;border-radius:20px;background-color:var(--bg-tertiary);color:var(--text-secondary)}.badge-primary{background-color:var(--accent-color);color:white}.badge-success{background-color:#4caf50;color:white}.badge-warning{background-color:#ff9800;color:white}.badge-danger{background-color:#f44336;color:white}.empty-state{background-color:var(--bg-tertiary);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);text-align:center;color:var(--text-secondary)}.empty-state-icon{font-size:48px;margin-bottom:var(--spacing-md);opacity:0.5}.empty-state-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.empty-state-description{font-size:var(--font-size-md);margin-bottom:var(--spacing-lg)}.creator-link{text-decoration:none;display:inline-block;position:relative;z-index:10;pointer-events:all}.x-handle{display:inline-flex;align-items:center;background-color:#1d9bf0;color:#fff;padding:5px 12px;border-radius:20px;font-weight:500;transition:background-color 0.2s ease;margin:6px 0}.x-handle:hover{background-color:#1877f2}.x-logo{width:16px;height:16px;margin-right:6px;display:inline-block;vertical-align:middle}@media (width <= 768px){.hide-mobile{display:none !important}.page-title{font-size:26px}.page-description{font-size:14px}.jai-container,.projects-container{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.btn,button,input[type="button"],input[type="submit"],input[type="reset"],a.button,.cta-button,.action-button,.jai-link{min-height:44px;min-width:44px}.modal-close{width:44px;height:44px}}@media (width>= 769px){.hide-desktop{display:none !important}}@media (width <= 991px){.placeholder-card{display:none}}

/* Back link styling */
.back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

/* Center container */
.center-container {
  text-align: center;
  margin: 40px auto;
}

/* Debug page utilities */
.debug-links {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.debug-button {
  padding: 0.5rem 1rem;
}

/* ========================================
   Standardized App Button Component
   Unified button system across all apps
   ======================================== */

.btn-app-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 32px;
  background: var(--app-accent, var(--btn-primary-bg));
  color: var(--color-text-inverse, #fff);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 52px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-app-primary:hover {
  background: var(--app-accent-dark, var(--btn-primary-hover));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-app-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.btn-app-primary:focus-visible {
  outline: 2px solid var(--app-accent, var(--accent-color));
  outline-offset: 2px;
}

.btn-app-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* App Secondary Button - Outlined style */
.btn-app-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  color: var(--app-accent, var(--text-primary));
  border: 2px solid var(--app-accent, var(--border-color));
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 44px;
}

.btn-app-secondary:hover {
  background: var(--app-accent-light, rgba(0, 0, 0, 0.05));
  border-color: var(--app-accent-dark, var(--app-accent));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-app-secondary:focus-visible {
  outline: 2px solid var(--app-accent, var(--accent-color));
  outline-offset: 2px;
}

/* App Tertiary Button - Ghost/link style for less important actions */
.btn-app-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: var(--text-secondary, #666);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
}

.btn-app-tertiary:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary, #333);
}

.btn-app-tertiary:focus-visible {
  outline: 2px solid var(--app-accent, var(--accent-color));
  outline-offset: 2px;
}

/* Standardized Empty State */
.empty-state-enhanced {
  text-align: center;
  padding: var(--spacing-2xl, 3rem) var(--spacing-lg, 1.5rem);
  color: var(--text-muted, #767676);
}

.empty-state-enhanced .empty-icon {
  font-size: 5rem;
  margin-bottom: var(--spacing-lg, 1.5rem);
  opacity: 0.7;
}

.empty-state-enhanced .empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #333);
  margin: 0 0 var(--spacing-sm, 0.5rem) 0;
}

.empty-state-enhanced .empty-description {
  font-size: 1rem;
  color: var(--text-secondary, #4d4d4d);
  margin: 0 0 var(--spacing-lg, 1.5rem) 0;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}